<template>
    <div>
        <el-row>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
                <div style="height:36px;line-height:36px">虚拟主机基本信息</div>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
                <div class="grid-content bg-purple-light" style="float:right">
                    <el-button>查看落位图</el-button>
                </div>
            </el-col>
        </el-row>
        <div style="height:34px;line-height:34px;font-size:0.9em;color:#666">
            管理IP：{{baseData.manageIp}} &nbsp&nbsp 主机名：{{baseData.virtualHostName}} &nbsp &nbsp 操作系统：{{baseData.osName}} &nbsp &nbsp 状态：{{baseData.stateName}}
        </div>
        <div style="height:36px;line-height:36px;">宿主资源分配</div>
        <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
                <charts-pie :height="pieHeight" :chartData="chartsData.cpuData.data" :legendData="chartsData.cpuData.legendData" :title="chartsData.cpuData.title" ref="virCpu"></charts-pie>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
                <charts-pie :height="pieHeight" :chartData="chartsData.memoryData.data" :legendData="chartsData.memoryData.legendData" :title="chartsData.memoryData.title" ref="virMemory"></charts-pie>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
                <charts-pie :height="pieHeight" :chartData="chartsData.diskData.data" :legendData="chartsData.diskData.legendData" :title="chartsData.diskData.title" ref="virDisk"></charts-pie>
            </el-col>
        </el-row>
        <div style="height:36px;line-height:36px;">虚拟机信息</div>
        <el-row>
            <el-col :xs="3" :sm="3" :md="3" :lg="3">
                <div class="grid-content bg-purple-light">
                    <el-button class="btnSty">新增</el-button>
                </div>
            </el-col>
        </el-row>
        <!-- 虚拟机信息表 -->
        <el-table :data="virtualData" border tooltip-effect="dark" style="width: 100%;margin-top:21px">
            <el-table-column label="虚拟机" min-width="120px">
                <template scope="scope">
                    <span style="color:blue">{{ scope.row.virtualHostName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="操作系统" min-width="80px">
                <template scope="scope">
                    <span>{{ scope.row.osName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="CPU" min-width="80px">
                <template scope="scope">
                    <span>{{ scope.row.cpuNum+'核' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="内存" min-width="80px">
                <template scope="scope">
                    <span>{{ scope.row.memoryCapacity+'G'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="硬盘" min-width="150px">
                <template scope="scope">
                    <div v-for="list in scope.row.virtualDisks" :key="list.diskId">{{ list.diskCapacity+'G'}}&nbsp&nbsp&nbsp&nbsp
                        <span style="color:blue">{{list.hostIp}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="IP地址" min-width="150px">
                <template scope="scope">
                    <div v-for="list in scope.row.virtualNetworkCards" :key="list.cardId">{{ list.cardName+'：'+list.cardIp}}</div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<style>
.btnSty{
    display:inline-block;
    width:100%
}
</style>
<script>
import ChartsPie from '@/components/charts-pie';
export default {
    name: 'virtualInfo',
    components: {
        ChartsPie,
    },
    props: {
        virtualId: {
            type: String,
            default: ''
        },
        pieHeight: {
            type: String,
            default: ''
        }
    },
    watch: {
        virtualId: function(val) {
            this.getVirtualInfo(val);

        }
    },
    created() {

        if (this.virtualId !== '') {
            this.getVirtualInfo(this.virtualId);
        }
    },
    mounted() {
        window.onresize = () => {
            this.$refs.virCpu.chart.resize();
            this.$refs.virMemory.chart.resize();
            this.$refs.virDisk.chart.resize();
        };
    },
    beforeDestroy() {
        window.onresize = () => { };
    },
    data() {
        return {
            //基础信息
            baseData: [],
            //图表信息
            chartsData: {
                cpuData: {
                    title: '',
                    data: [],
                    legendData: []
                },
                diskData: {
                    title: '',
                    data: [],
                    legendData: []
                },
                memoryData: {
                    title: '',
                    data: [],
                    legendData: []
                }
            },
            //虚拟机信息
            virtualData: [],
        }
    },
    methods: {
        //获取宿主机信息
        getVirtualInfo(virtualId) {
            let _url = '/resman/virtual/virtualMachine/info/' + virtualId;
            this.$http.get(_url).then((response) => {
                console.log(response)
                if (response.code === 0) {
                    let virtualInfo = response.data.virtualResource[0];
                    this.baseData = response.data.virtualMachineBase;
                    this.chartsData.cpuData = this.chartComputed('CPU', '', { free: virtualInfo.cpuIdel, used: virtualInfo.cpuUsed, total: virtualInfo.cpuTotal });
                    this.chartsData.memoryData = this.chartComputed('内存', 'G', { free: virtualInfo.memoryFree, used: virtualInfo.memoryUsed, total: virtualInfo.memoryTotal });
                    this.chartsData.diskData = this.chartComputed('硬盘', 'G', { free: virtualInfo.diskFree, used: virtualInfo.diskUsed, total: virtualInfo.diskTotal });
                    this.virtualData.push(response.data.virtualMachineDetail);
                } else {
                    console.log(response.msg)
                }
            }).catch((response) => {
                console.log(response)
            })
        },
        //处理数据，供图表使用
        chartComputed(type, unit, data) {
            let temp_obj = {};
            if (data.total > 0) {
                temp_obj = {
                    title: type + '：' + Math.round(data.used / data.total * 100) + '%',
                    data: [
                        { value: data.used, name: '已用：' + data.used + unit },
                        { value: data.free, name: '可用：' + data.free + unit, itemStyle: { normal: { color: '#ccc' } } }
                    ],
                    legendData: ['已用：' + data.used + unit, '可用：' + data.free + unit]
                };
                if (type === "CPU") {
                    temp_obj.data = [
                        { value: data.used, name: '已用：' + Math.round(data.used / data.total * 100) + '%' },
                        { value: data.free, name: '可用：' + Math.round(data.free / data.total * 100) + '%', itemStyle: { normal: { color: '#ccc' } } }
                    ];
                    temp_obj.legendData = ['已用：' + Math.round(data.used / data.total * 100) + '%', '可用：' + Math.round(data.free / data.total) + '%']
                };
            } else {
                temp_obj = {
                    title: type + '：不可用',
                    data: [
                        { value: data.free, name: '不可用', itemStyle: { normal: { color: '#ccc' } } }
                    ],
                    legendData: ['不可用']
                };
            }
            return temp_obj;
        },




    }

}

</script>